<template>
  <PageContainer>
    <view class="container">
      <Header title="供需审核管理" v-model="headerHeight"></Header>
      <view class="tabs-box" :style="{ top: headerHeight + 'px' }">
        <view class="tab">
          <Tabs v-model="currentTab" background-color="#FFF" :isScrollTop="false">
            <TabNav tabBarColor="#2878FF" />
            <template v-if="tabsData?.length">
              <TabsItem
                v-for="(item, index) in tabsData"
                @click="handleTabClick"
                :key="index"
                :name="item.title"
                :value="item.id"
                :unread="item.num"
              >
                <template v-if="currentTab === 0">
                  <RadioTagGroup v-model="auditParame.reviewStatus" :data="auditStatus" />

                  <view class="py-6 px-16 disFlxJS gap-4">
                    <view class="flex-1" style="height: 72rpx">
                      <TSearch
                        placeholder="搜索姓名/单位/供需标题"
                        @confirm="searchAuditConfirm"
                      ></TSearch>
                    </view>
                  </view>
                </template>
                <template v-if="currentTab === 1">
                  <RadioTagGroup v-model="crossClubParame.reviewStatus" :data="crossClubStatus" />

                  <view class="py-6 px-16 disFlxJS gap-4">
                    <view class="flex-1" style="height: 72rpx">
                      <TSearch
                        placeholder="搜索供需名称"
                        @confirm="searchCrossClubConfirm"
                      ></TSearch>
                    </view>
                  </view>
                </template>
              </TabsItem>
            </template>
          </Tabs>
        </view>
      </view>
      <AuditList v-if="currentTab === 0" ref="auditListRef" :parame="auditParame"></AuditList>
      <CrossClubRecords
        v-if="currentTab === 1"
        ref="crossClubRef"
        :parame="crossClubParame"
      ></CrossClubRecords>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* businessOpportunitieAuditManage 供需审核管理 */
  import { getPublisherAuditStatistics } from '@/api/businessOpportunities';
  import type { ICrossClubRecordsQuery, IReviewListQuery } from '@/api/businessOpportunities/type';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { ReviewStatus } from '@/enums/businessOpportunitiesEnum';
  import { reactive, ref } from 'vue';
  import RadioTagGroup from '../../components/RadioTagGroup.vue';

  import { onShow } from '@dcloudio/uni-app';
  import type { TagItem } from '../../components/RadioTagGroup.vue';
  import AuditList from './components/AuditList.vue';
  import CrossClubRecords from './components/CrossClubRecords.vue';
  const headerHeight = ref(0);

  // 供需发布审核

  const auditListRef = ref<InstanceType<typeof AuditList>>();
  const auditParame = ref<IReviewListQuery>({
    reviewStatus: null,
    keyWord: '',
    current: 1,
    size: 10,
  });

  const currentTab = ref(0);
  const tabsData = ref<
    {
      title: string;
      id: number | undefined;
      num?: number;
    }[]
  >([
    {
      title: '供需发布审核',
      id: 0,
    },
    {
      title: '跨会申请记录',
      id: 1,
    },
  ]);

  const auditStatus = ref<TagItem[]>([
    {
      label: '全部',
      value: null,
    },
    {
      label: '待审核',
      value: ReviewStatus.Pending,
    },
    {
      label: '已通过',
      value: ReviewStatus.Approved,
    },
    {
      label: '已驳回',
      value: ReviewStatus.Rejected,
    },
    {
      label: '已失效',
      value: ReviewStatus.Expired,
    },
  ]);
  const searchAuditConfirm = (keyWord: string) => {
    auditParame.value.keyWord = keyWord;
  };

  // 跨会记录
  const crossClubRef = ref<InstanceType<typeof CrossClubRecords>>();
  const crossClubStatus = ref<TagItem[]>([
    {
      label: '全部',
      value: null,
    },
    {
      label: '待审核',
      value: ReviewStatus.Pending,
    },
    {
      label: '已通过',
      value: ReviewStatus.Approved,
    },
    {
      label: '已驳回',
      value: ReviewStatus.Rejected,
    },
  ]);

  const crossClubParame = reactive<ICrossClubRecordsQuery>({
    keyWord: '',
    current: 1,
    size: 10,
    reviewStatus: null,
  });

  const searchCrossClubConfirm = (keyWord: string) => {
    crossClubParame.keyWord = keyWord;
  };

  const handleTabClick = (v: number) => {
    if (!v) {
      auditListRef.value?.refresh();
    } else {
      auditListRef.value?.refresh();
    }
  };

  const queryPublisherAuditStatistics = async () => {
    const res = await getPublisherAuditStatistics();
    tabsData.value[0].num = res;
  };

  onShow(() => {
    queryPublisherAuditStatistics();
  });
</script>

<style lang="scss" scoped>
  .container {
    .tabs-box {
      position: sticky;
      background-color: #ffffff;
      z-index: 999;
    }
    .list-item {
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      &:nth-child(1) {
        padding-top: 30rpx;
      }
    }
  }
</style>
